<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: lalahahababa
 * @LastEditTime: 2022-01-07 16:50:41
-->
<template>
  <!--1. 容器 -->
  <div ref="left2_container" style="height: 95%"></div>
</template>


<script>
import { Column } from '@antv/g2plot';

export default {
      data(){
        return{
          dataArr:[
            { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
  { year: '1995', value: 4.9 },
  { year: '1996', value: 6 },
        ]
        }
    },
    created(){


    },
    mounted(){
      this.initChart()

      },
      methods:{
        initChart() {
          const column =new Column(this.$refs.left2_container, {
            data:this.dataArr,
             xField: 'year',
             yField: 'value',

             tooltip:{
               fields:['ratio','sales'],
               domStyles:{
                 'g2-tooltip':{
                   padding:'5px',
                   background:'rgba(47,6,170,0.8)',
                   color:'#fff',
                   fontSize:'16px'

                 }
               }
             }
          });
         column.render();

        }

      }
}

</script>


<style scoped>

</style>